import React,{useState,useEffect} from 'react'
import axios from '../../utils/axios_1'
import { Swiper ,Tabs} from 'react-vant';
import {SetList} from '../../type/type'
type Props={}
function Home({}:Props) {
    const [list,setlist]=useState([])
    const [listss,setlissst]=useState([])
    useEffect(() => {
        axios.get('/list').then(res=>{
            setlist(res.data.list)
            setlissst(res.data.list[0].info)
        })
    }, [])
    // const change=(key:any)=>{
    //     setlissst(list[key].info)
    // }
    return (
        <div>
            <Swiper className="my-swipe" autoplay={3000}>
                <Swiper.Item>1</Swiper.Item>
                <Swiper.Item>2</Swiper.Item>
                <Swiper.Item>3</Swiper.Item>
                <Swiper.Item>4</Swiper.Item>
            </Swiper>
            <Tabs active={0}>
                {
                    list&&list.map((item:SetList,index:number)=>{
                        return <Tabs.TabPane key={index} title={item.title}>
                            {   
                                listss&&listss.map((item:SetList,index:number)=>{
                                    return <div key={index}>
                                        <img src={item.img} alt="" />
                                        <p>{item.title}</p>
                                    </div>
                                })
                            }
                    </Tabs.TabPane>
                    })
                }
                    
            </Tabs>
        </div>
    )
}

export default Home
